<template>
  <div class="userinfo">
    <a-form
      ref="formRef"
      :label-col="labelCol"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="username" label="用户名" name="username">
        <a-input
          v-model:value="formState.username"
          placeholder="请输入用户名"
        />
      </a-form-item>
      <a-form-item ref="phone" label="手机号码" name="phone">
        <a-input v-model:value="formState.phone" placeholder="请输入手机号码" />
      </a-form-item>
      <a-form-item ref="userAddress" label="地址" name="userAddress">
        <a-input
          v-model:value="formState.userAddress"
          placeholder="请输入用户地址"
        />
      </a-form-item>
      <a-form-item label="自我介绍" name="desc">
        <a-textarea
          v-model:value="formState.summary"
          placeholder="请输入自我介绍"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { getCurrentInstance, reactive, ref, toRaw } from "vue";
import { userStore } from "@/store/modules/user.js";
import { updateUserInfo, uploadUserAvatar } from "@/api/user.js";
import { message } from "ant-design-vue";

const { proxy } = getCurrentInstance();
const user = userStore();
let avatar = ref("");
const formRef = ref();
const labelCol = {
  span: 3,
};
const wrapperCol = {
  span: 14,
};
const formState = reactive({
  username: "",
  phone: "",
  sex: 1,
  summary: "",
  userAddress: "",
  avatar: "",
});
const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "手机号码不能为空",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "性别类目不能为空",
      trigger: "change",
    },
  ],
  userAddress: [
    {
      required: true,
      message: "用户地址不能为空",
      trigger: "change",
    },
  ],
  summary: [
    {
      required: true,
      message: "自我描述不能为空",
      trigger: "blur",
    },
  ],
};
const onSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      let info = toRaw(formState);
      let res = await updateUserInfo({ id: user.user_id, ...info });
      if (res.status === 200) {
        user.setUserInfo(res.data);
        message.success("更新成功");
      } else message.error(res.data);
    })
    .catch((error) => {
      console.log("error", error);
    });
};
// 点击打开头像头像
const upload = () => {
  const uploadRef = document.getElementById("uploadRef");
  uploadRef.click();
  uploadRef.addEventListener("change", (e) => {
    let file = e.target.files[0];
    ReviewAvatar(file);
    uploadAvatar(file);
  });
};
// 回显头像
const ReviewAvatar = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = (e) => {
    avatar.value = e.target.result;
  };
};
// 上传头像
const uploadAvatar = async (file) => {
  let formData = new FormData();
  formData.append("file", file);
  formData.append("id", user.user_id);
  let res = await uploadUserAvatar(formData);
  console.log(res);
  if (res.status === 200) {
    formState["avatar"] = res.url;
    message.success("上传成功");
  } else message.error("上传失败");
};

const init = () => {
  const obj = user.userinfo;
  for (const key in obj) {
    formState[key] = obj[key];
  }
};
init();
</script>

<style lang="scss" scoped>
.userinfo {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  padding-top: 15px;
}

.upload {
  width: 150px;

  .upload-main {
    width: 100%;
    height: 150px;
    border-radius: 50%;
    background-color: #8a919f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
  }

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
  }

  p {
    width: 100%;
    text-align: center !important;
    color: #8a919f;
    font-size: 15px;
    margin: 15px 0;
  }
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>